import Layout from '../../components/layout'
import { Auth } from '../../store/models/auth'
import { isAuth } from '../../utils/auth'
import { Link } from 'react-router-dom'
import { Col, Menu, Row, Typography, Descriptions } from 'antd'
import { PlusCircleOutlined, OrderedListOutlined } from '@ant-design/icons'
const { Title } = Typography

export default function AdminDashboard() {
  const {
    user: { _id, name, email },
  } = isAuth() as Auth

  return (
    <Layout title='Dashboard'>
      <Row gutter={10}>
        <Col span='4'>
          <Title level={5}>Admin Links</Title>
          <Menu>
            <Menu.Item key='1'>
              <PlusCircleOutlined />
              <Link to='/admin/create/category'>Create Category</Link>
            </Menu.Item>
            <Menu.Item key='2'>
              <PlusCircleOutlined />
              <Link to='/admin/create/product'>Create Product</Link>
            </Menu.Item>
            <Menu.Item key='3'>
              <OrderedListOutlined />
              <Link to='/admin/orders'>Orders</Link>
            </Menu.Item>
          </Menu>
        </Col>
        <Col span='20'>
          <Descriptions title='Admin Info' bordered>
            <Descriptions.Item label='ID'>{_id}</Descriptions.Item>
            <Descriptions.Item label='Name'>{name}</Descriptions.Item>
            <Descriptions.Item label='Email'>{email}</Descriptions.Item>
          </Descriptions>
        </Col>
      </Row>
    </Layout>
  )
}
